<template>
  <div>
    <dialogDiy :titleCenter="false" title="反馈详情" ref="dialogDiy">
      <div v-loading="detailLoading">
        <div class="feedback-box">
          <div class="feedback-box-v">
            <div class="feedback-box-v-title">用户ID：</div>
            <div class="feedback-box-v-content">
              {{ detailInfo.id ? detailInfo.id : "-" }}
            </div>
          </div>
          
          <div class="feedback-box-v">
            <div class="feedback-box-v-title">用户注册时间：</div>
            <div class="feedback-box-v-content">
              {{ detailInfo.registerTime ? detailInfo.registerTime : "-" }}
            </div>
          </div>
          <div class="feedback-box-v">
            <div class="feedback-box-v-title">用户昵称：</div>
            <div class="feedback-box-v-content">
              {{ detailInfo.memberNickname ? detailInfo.memberNickname : "-" }}
            </div>
          </div>
          <div class="feedback-box-v">
            <div class="feedback-box-v-title">用户头像：</div>
            <div class="feedback-box-v-content">
              <el-image style="width: 60px; height: 60px" :src="detailInfo.memberIcon"
                :preview-src-list="[detailInfo.memberIcon]">
              </el-image>
            </div>
          </div>
          <div class="feedback-box-v">
            <div class="feedback-box-v-title">手机号：</div>
            <div class="feedback-box-v-content">
              {{ detailInfo.phone ? detailInfo.phone : "-" }}
            </div>
          </div>
          <div class="feedback-box-v">
            <div class="feedback-box-v-title">反馈时间：</div>
            <div class="feedback-box-v-content">
              {{ detailInfo.createTime ? detailInfo.createTime : "-" }}
            </div>
          </div>
          <div class="feedback-box-v">
            <div class="feedback-box-v-title">反馈内容：</div>
            <div class="feedback-box-v-content refer-bg">
              {{ detailInfo.content ? detailInfo.content : "-" }}
            </div>
          </div>

          <div class="feedback-box-v">
            <div class="feedback-box-v-title">上传材料：</div>
            <div class="feedback-box-v-content" v-if="detailInfo.pics">
              <el-image v-for="(item, index) in detailInfo.pics" :key="index"
                style="width: 60px; height: 60px ; margin-right: 10px;" :src="item" :preview-src-list="[item]">
              </el-image>

            </div>
            <div class="feedback-box-v-content" v-else>-</div>
          </div>
          <div class="feedback-box-v">
            <div class="feedback-box-v-title">重要程度：</div>
            <div class="feedback-box-v-content">
              {{ detailInfo.urgencyTypeName ? detailInfo.urgencyTypeName : "-" }}
            </div>
          </div>
          <div class="feedback-box-v">
            <div class="feedback-box-v-title">回复状态：</div>
            <div class="feedback-box-v-content">
              <el-tag size="mini" :type="detailInfo.replyStatus == 0 ? 'info' : 'success'" disable-transitions>{{
                detailInfo.replyStatus == 0 ? "未回复" : "已回复" }}</el-tag>
            </div>
          </div>
          <div class="feedback-box-v" v-if="detailInfo.replyStatus == 1">
            <div class="feedback-box-v-title">回复内容：</div>
            <div class="feedback-box-v-content refer-bg">
              {{
                detailInfo.merchantReplyContent
                  ? detailInfo.merchantReplyContent
                  : "-"
              }}
            </div>
          </div>
        </div>
      </div>
    </dialogDiy>
  </div>
</template>

<script>
import { getFeedbackDetail } from "@/api/member";
import dialogDiy from "@/components/dialogDiy";
export default {
  name: "FeedbackDetail",
  components: {
    dialogDiy
  },
  data() {
    return {
      detailLoading: false,
      detailInfo: {},
      dialogVisible: false,
      fullscreen: false
    };
  },
  methods: {
    handleClose() {
      this.detailInfo = {};
      this.$refs.dialogDiy.handleClose();
    },
    openlog(v) {
      if (v.id) {
        getFeedbackDetail(v.id).then(res => {
          this.$refs.dialogDiy.openlog();
          if (res.data.pics) {
            res.data.pics = res.data.pics.split(",");
          }
          this.detailInfo = res.data;
          this.detailInfo.urgencyTypeName = v.urgencyTypeName
          this.detailInfo.registerTime = v.registerTime
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
.feedback-box {
  padding-bottom: 20px;

  .feedback-box-v {
    display: flex;
    width: 100%;
    margin: 20px 0;

    .feedback-box-v-title {
      width: 10%;
      line-height: 20px;
      text-align: right;
    }

    .feedback-box-v-content {
      width: 90%;
      line-height: 20px;
    }

    .refer-bg {
      background-color: #f5f5f5;
      padding: 10px;
      border-radius: 5px;
    }
  }
}
</style>
